<!DOCTYPE html>
<html lang="en">

<style>
    .p-collapsing-sidebar > .nav-link {
        width: 55px;
        padding: 0;
    }

    .nav-item:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .nav-item-now {
        background: linear-gradient(36deg, #24C9F6, #2af270);
    }

    .nav-item-now .p-collapsing-title,
    .nav-item-now i {
        color: rgba(1, 0, 31, 0.9);
    }

    .main1 {
        width: 100%;
        height: 60vh;
        padding: 10px 30px 30px 30px;
    }

    #search {
        margin-right: 25px;
    }

    #search input {
        width: 20rem;
    }

    .nav-tabs-minimal .nav-link {
        padding: 0 !important;
    }

    .nav-tabs-minimal .nav-link {
        padding: 0;
        border: 0;
    }

    .icon-waste-can {
        color: rgb(42, 242, 112);
    }

    .icon-star-shape-favorite {
        color: #CCCCCC; /* 未点击时的颜色，可以根据需要进行调整 */
        cursor: pointer;
    }

    .icon-star-favorite {
        color: gold; /* 点击后显示的金黄色图标 */
    }


</style>
<head>
    <meta charset="UTF-8">
    <title>预案管理</title>
    <!-- CSS -->
    <link href="assets/css/fonts/fontawesome/all.min.css" rel="stylesheet">
    <link href="assets/css/fonts/beid.css" rel="stylesheet">

    <link href="assets/css/main.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet">

    <!-- JQVMAP -->
    <link href="assets/plugins/jqvmap/jqvmap.min.css" rel="stylesheet">

    <!-- dateRangePicker -->
    <link href="assets/plugins/daterangepicker/daterangepicker.css" rel="stylesheet">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
    <link rel="icon" href="assets/img/favicon.png">

    <!-- Fonts -->
    <link href="assets/fonts/inter/inter.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
          rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="body">

<!-- header -->
<header class="main-header">
    <!-- nav -->
    <nav class="main-navbar navbar navbar-expand-lg navbar-light shadow-2">
        <div class="lnav-box d-flex">
            <div class="logo-wrapper px-3 d-none d-md-flex">
                <img src="assets/img/logo.png" alt="Logo">
            </div>
            <div class="sidebar-toggler-wrapper ml-auto">
                <button class="p-collapsing-sidebar-toggler sidebar-toggler-secondary transition rounded-circle"
                        data-collapsing="partially" data-collapsing-target="#adminNav" type="button">
                    <span class="icon-menu-options"></span>
                </button>
            </div>
        </div>
        <div class="d-none d-lg-block ml-0 mr-auto pl-4">

        </div>
        <div class="pr-6">
            <ul class="nav sec-nav navbar-nav flex-row">

                <li class="user-item nav-item dropdown">
                    <a class="user-link nav-link d-inline-flex align-items-center h-100 small-1 pl-1 pl-sm-3 pr-0"
                       href="#" id="dropdownAdmin_02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="rounded-circle Avatar-rounded-circle" src="./assets/img/user.png" alt=""
                             style="position: absolute;top: 4px;left: -35px;border: none;width: 38px;height: 38px;border: 2px solid;">
                        <div class="d-none d-sm-block lh-1">
                            <div class="lh-5">张三</div>
                            <span class="small-3"><i class="fas fa-circle text-warning small-5"></i> 在线</span>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right shadow-1 py-3 position-absolute mt-2"
                         aria-labelledby="dropdownAdmin">

                        <a class="dropdown-item" href="#"><span class="icon-power-on-buton mr-2"></span>退出</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /.nav -->
</header>
<!-- /.header -->

<!-- main -->
<main>
    <!-- sidebar -->
    <nav id="adminNav" class="main-sidebar p-collapsing-sidebar sidebar-fixed sidebar-left d-flex flex-column">
        <div class="main-sidebar-inner" data-scrollbar="sidebar">
            <ul class="sidebar-nav sidebar-nav-light-hover list-unstyled text-unset small-3 fw-600 content-list">
                <li class="nav-item text-light transition">
                    <a href="atlas.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-desktop"></i> <span class="p-collapsing-title">知识图谱</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="warning.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-exclamation-circle"></i> <span class="p-collapsing-title">智能预警</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="message-management.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-chart-bar"></i> <span class="p-collapsing-title">预警消息管理</span>
                    </a>
                </li>

                <li class="nav-item-now text-light transition">
                    <a href="document-management.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-file-contract"></i> <span class="p-collapsing-title">预案管理</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="corpus-management.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="icon-menu-grid"></i> <span class="p-collapsing-title">语料库管理</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a aria-expanded="false" data-toggle="collapse"
                       class="sbr-collapse nav-link nav-link-border collapser collapser-active open">
                        <i class="far fa-sticky-note"></i> <span class="p-collapsing-title">组织架构管理</span>
                    </a>
                    <div class="collapse nav-collapse collapse show">
                        <ul class="list-unstyled">
                            <li class="nav-item">
                                <a href="user-management.html" class="p-collapsing-title nav-link">
                                    <span>用户管理</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="organization-management.html" class="p-collapsing-title nav-link">
                                    <span>组织管理</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="nav-item text-light transition">
                    <a aria-expanded="false" data-toggle="collapse"
                       class="sbr-collapse nav-link nav-link-border collapser collapser-active open">
                        <i class="far fa-clone"></i> <span class="p-collapsing-title">日志管理</span>
                    </a>
                    <div class="collapse nav-collapse collapse show">
                        <ul class="list-unstyled">
                            <li class="nav-item">
                                <a href="user-log.html" class="p-collapsing-title nav-link">
                                    <span>用户登录记录</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="operation-log.html" class="p-collapsing-title nav-link">
                                    <span>操作记录</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /.sidebar -->

    <!-- main content -->
    <div class="main-container">

        <div class="overflow-hidden">
            <div id="charts" class="page-content-fl">
                <div class="d-flex align-items-center px-6 py-5">
                    <div class="text-light mr-auto">
                        <h2 class="fw-100 mb-0">预案管理</h2>
                        <span class="lead-1 text-info">Document management</span>
                    </div>
                    <ul class="nav nav-tabs-minimal" id="emailTab1" role="tablist">
                        <li class="ml-lg-auto my-5 my-lg-0 w-100 w-lg-auto order-lg-last">
                            <div class="nav-link d-flex align-items-center px-4 py-0 h-100">
                                <a href="#" class="btn btn-theme">
                                    添加新预案
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="mt-5" id="search">
                                <div class="form-group input-group">
                                    <input type="text" class="form-control" placeholder="请输入要查找的预案">
                                    <div class="input-group-append ml-3">
                                        <button class="btn btn-theme" type="button">查找</button>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="container-fluid p-0">
                    <div class="row panel-row panel-top-line">
                        <div class="main1">
                            <!--预案菜单管理-->
                            <div class="panel-body menu1" id="panelBody" style="position: relative; z-index: 7;">

                                <!--叉叉-->
                                <header class="panel-header align-items-center" style="margin-bottom: 1rem;">
                                    <div class="parent">
                                        <h5 class="title mb-0">预案类型管理</h5>
                                        <a data-toggle="remove" class="nav-item" id="removeLink" style="position: relative; z-index: 9;">
                                            <span class="icon-close" style="margin-right: 0.5rem"></span>
                                        </a>
                                    </div>
                                </header>

                                <div class="mb-6" style="padding: 0.5rem">
                                    <ul class="list-unstyled" style="height: 15rem;">
                                        <!-- list-item -->
                                        <li class="d-flex align-items-center mb-1">
                                            <div class="flex-1 pr-4">
                                                <form>
                                                    <div class="custom-control custom-checkbox">
                                                        <span class="icon-waste-can"></span>
                                                        <!--                                                    <input class="custom-control-input" type="checkbox" value="" id="Check1">-->
                                                        <!--                                                    <label class="custom-control-label" for="Check1"></label>-->
                                                        火灾应急预案
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="d-flex">
                                                <a href="#" class="mr-2 text-warning"><i class="far fa-edit"></i></a>
                                                <!--                                            <a href="#" class="text-danger"><i class="fas fa-times"></i></a>-->
                                            </div>
                                        </li>
                                        <!-- /.list-item -->
                                        <!-- list-item -->
                                        <li class="d-flex align-items-center mb-1">
                                            <div class="flex-1 pr-4">
                                                <form>
                                                    <div class="custom-control custom-checkbox">
                                                        <!--                                                    <input class="custom-control-input" type="checkbox" value="" id="Check2" checked="">-->
                                                        <!--                                                    <label class="custom-control-label" for="Check2"></label>-->
                                                        <span class="icon-waste-can"></span>
                                                        突发事件预案

                                                    </div>
                                                </form>
                                            </div>
                                            <div class="d-flex">
                                                <a href="#" class="mr-2 text-warning"><i class="far fa-edit"></i></a>
                                                <!--                                            <a href="#" class="text-danger"><i class="fas fa-times"></i></a>-->
                                            </div>
                                        </li>
                                        <!-- /.list-item -->

                                        <!-- list-item -->
                                        <li class="d-flex align-items-center mb-1">
                                            <div class="flex-1 pr-4">
                                                <form>
                                                    <div class="custom-control custom-checkbox">
                                                        <!--                                                    <input class="custom-control-input" type="checkbox" value="" id="Check6">-->
                                                        <!--                                                    <label class="custom-control-label" for="Check6"></label>-->
                                                        <span class="icon-waste-can"></span>
                                                        气象灾害预案

                                                    </div>
                                                </form>
                                            </div>
                                            <div class="d-flex">
                                                <a href="#" class="mr-2 text-warning"><i class="far fa-edit"></i></a>
                                                <!--                                            <a href="#" class="text-danger"><i class="fas fa-times"></i></a>-->
                                            </div>
                                        </li>
                                        <!-- /.list-item -->

                                    </ul>
                                </div>
                                <div style="padding: 0.8rem">
                                    <h6 class="mb-4">添加预案类型</h6>
                                    <div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="exampleFormControlInput1"
                                                   placeholder="类型名称">
                                        </div>
                                        <div>
                                            <a href="#" class="btn btn-round btn-warning">确定</a>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <!--文件管理表格-->

                            <div class="col-lg-9 pl-lg-0">
                                <div class="form11">
                                    <ul class="nav nav-tabs-minimal" id="emailTab" role="tablist">
                                        <li class="nav-item ml-lg-auto my-5 my-lg-0 w-100 w-lg-auto order-lg-last">
                                            <div class="nav-link d-flex align-items-center px-4 py-0 h-100"><a href="#"
                                                                                                               class="btn btn-lg btn-warning d-flex align-items-center my-0"
                                                                                                               id="menu-edit"><span
                                                    class="icon-edit-document lead-1 mr-1"></span>预案类型管理</a></div>
                                        </li>
                                        <li class="nav-item menu2">
                                            <a class="nav-link d-flex align-items-center px-4 px-sm-5 py-4 active show"
                                               id="email-home-tab" data-toggle="tab" href="#email-1" role="tab"
                                               aria-controls="email-1" aria-selected="true">
<!--                                                <span class="icon-chat-speech-balloon text-warning mr-2"></span>-->
                                                <svg t="1700880456334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3419" id="mx_n_1700880456335" width="20" height="20"><path d="M623.008 879.328c-10.624-20.096-21.888-49.344-15.68-66.816 5.28-14.624 9.568-18.144 18.112-25.12 11.424-9.312 27.04-22.048 39.488-54.304 4.768-12.48 7.936-25.024 10.944-37.12 10.976-43.904 14.88-50.656 46.72-46.976 23.872 2.816 38.72 14.304 55.872 27.648 16.864 13.056 36 26.944 62.368 31.488a384.704 384.704 0 0 1-217.824 171.2M181.76 708.768c27.744-3.328 58.112-13.024 79.776-36.704 23.968-26.112 24.128-60.256 24.256-87.68 0.192-37.344 2.24-47.584 21.12-54.624 25.856-9.568 37.536-0.416 61.76 21.088 14.272 12.64 30.4 26.976 51.84 33.568 25.248 7.776 55.488 4.16 80.832-9.76a107.744 107.744 0 0 0 52.032-64.8l0.128 0.032 0.224-0.96c0.096-0.256 0.224-0.448 0.288-0.704 0.256-0.928 0.288-1.792 0.544-2.72 1.888-6.528 3.2-13.088 4.032-19.616 0.416-2.912 0.544-5.568 0.8-8.384 0.16-2.24 0.448-4.512 0.544-6.72a311.424 311.424 0 0 0-0.832-44.16 337.6 337.6 0 0 1-1.024-19.552c0.32-7.456 1.664-13.44 4.352-17.216 5.216-2.528 19.2-5.024 28.864-6.72 26.688-4.672 59.328-10.656 79.04-33.824l0.288-0.224-0.032-0.032c1.152-1.376 2.464-2.592 3.52-4.096 33.344-46.976 31.296-95.52-5.28-126.752a120.768 120.768 0 0 0-8.992-6.656c-21.536-14.976-30.72-25.536-24.416-44.928 1.856-5.856 3.84-10.912 5.824-15.52 147.904 53.408 253.824 194.592 253.824 360.896 0 46.24-8.64 90.4-23.584 131.456-6.08 1.6-11.424 2.72-14.144 2.72-13.152 0-22.656-6.88-39.68-20.128-20.544-15.936-46.08-35.744-87.616-40.608-89.504-10.656-106.4 55.488-116.288 94.976-2.496 10.048-4.96 20.256-8.64 29.696-6.272 16.384-11.52 20.64-20.16 27.68-11.232 9.184-26.656 21.76-37.888 53.184-12.48 34.816-1.088 73.792 11.36 101.792-15.52 1.92-31.264 3.232-47.36 3.232-140.032 0-262.208-75.232-329.312-187.232M511.04 128c23.264 0 45.92 2.4 68.032 6.368-1.6 4.032-3.136 8.032-4.608 12.608-21.888 67.904 31.36 104.96 48.832 117.088 1.664 1.184 3.072 2.112 3.968 2.816 3.904 3.328 13.824 12.192-3.616 38.336-6.176 5.28-12.512 6.24-28 6.976-20.832 0.992-52.16 2.528-80 33.504l-0.128 0.096-0.064 0.096-0.352 0.32c-0.576 0.64-0.96 1.344-1.472 1.984-14.784 17.312-18.976 36.256-19.424 54.848-0.672 12.288 0.096 24.64 0.832 36.416 0.8 12.896 1.472 25.184 0.416 36.096-0.672 5.12-1.664 10.368-3.136 15.744a43.84 43.84 0 0 1-21.76 27.232c-10.176 5.568-22.528 7.456-31.168 4.736-8.192-2.528-17.952-11.168-28.256-20.32-25.376-22.496-63.68-56.544-126.56-33.152-62.336 23.232-62.592 78.016-62.784 114.272-0.096 18.944-0.192 36.864-7.456 44.8-13.376 14.624-40.8 17.696-62.72 17.184A381.824 381.824 0 0 1 127.104 512c0-212.064 171.936-384 384-384m0-64c-247.04 0-448 200.96-448 448s200.96 448 448 448 448-200.96 448-448-200.96-448-448-448" fill="#2af270" p-id="3420"></path></svg>
                                                <span class="d-none d-sm-inline d-lg-none d-xl-inline">自然灾害预案</span>
                                                <span class="text-warning fw-500 ml-1">(+3)</span></a>
                                        </li>
                                        <li class="nav-item menu2">
                                            <a class="nav-link d-flex align-items-center px-4 px-sm-5 py-4"
                                               id="email-profile-tab" data-toggle="tab" href="#email-2" role="tab"
                                               aria-controls="email-2" aria-selected="false">
                                                <span class="icon-web-page-home text-warning mr-2"></span>
                                                <span class="d-none d-sm-inline d-lg-none d-xl-inline">突发公共事件</span>
                                                <span class="text-warning fw-500 ml-1">(+3)</span></a>
                                        </li>
                                        <li class="nav-item menu2">
                                            <a class="nav-link d-flex align-items-center px-4 px-sm-5 py-4"
                                               id="email-contact-tab" data-toggle="tab" href="#email-3" role="tab"
                                               aria-controls="email-3" aria-selected="false">
<!--                                                <span class="icon-shopping-store-tags text-warning mr-2"></span>-->
                                                <svg t="1700878728471" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1979" id="mx_n_1700878728472" width="20" height="20"><path d="M958.542769 540.711385c-3.702154-50.333538-13.174154-100.391385-27.451077-144.836923-21.897846-68.135385-54.567385-133.159385-92.002461-183.236924-10.24-13.666462-30.011077-16.777846-44.248616-6.971076a29.577846 29.577846 0 0 0-7.286153 42.397538c33.555692 44.839385 62.976 103.699692 82.963692 165.730462 12.839385 40.034462 21.425231 85.366154 24.753231 131.170461 12.209231 166.892308-59.372308 303.222154-197.769847 380.553846-22.665846-178.825846-167.227077-237.174154-173.883076-239.812923a32.886154 32.886154 0 0 0-27.332924 1.634462c-125.853538 67.032615-162.500923 179.515077-173.134769 242.451692-124.534154-62.838154-200.251077-181.169231-200.251077-317.558154 0-91.864615 47.694769-176.994462 145.782154-260.155077 13.036308-11.067077 26.328615-21.956923 39.620923-32.846769 72.034462-58.958769 146.589538-119.926154 184.123077-212.676923 4.115692-10.003692 7.68-19.081846 10.673231-27.273846 66.363077 44.780308 209.979077 165.671385 256.590769 396.937846 3.328 16.502154 20.027077 27.254154 37.12 24.064 17.211077-3.150769 28.455385-19.101538 25.107692-35.584C757.523692 145.073231 526.001231 18.865231 499.672615 5.415385c-0.886154-0.492308-1.811692-0.905846-2.756923-1.378462-15.694769-7.148308-34.461538-0.886154-42.141538 14.040615-2.166154 4.233846-3.190154 8.743385-3.268923 13.193847-2.953846 11.224615-15.320615 45.942154-18.116923 53.228307-31.822769 78.513231-97.142154 131.938462-166.262154 188.49477-13.587692 11.106462-27.116308 22.232615-40.467692 33.516307-110.907077 94.089846-167.128615 196.923077-167.128616 305.723077 0 175.537231 107.027692 325.513846 279.315692 391.286154a32.649846 32.649846 0 0 0 29.617231-3.190154c8.723692-5.671385 13.922462-15.222154 13.824-25.324308-0.039385-6.183385 0.472615-147.574154 130.599385-226.500923 34.363077 18.944 124.219077 82.077538 124.219077 225.378462 0 10.358154 5.454769 20.027077 14.493538 25.6 9.058462 5.572923 20.460308 6.419692 30.267077 2.107077 188.337231-81.900308 291.780923-254.227692 276.676923-460.878769M464.580923 56.083692" fill="#2af270" p-id="1980"></path></svg>
                                                <span class="d-none d-sm-inline d-lg-none d-xl-inline">火灾应急预案</span>
                                                <span class="text-warning fw-500 ml-1">(+2)</span></a>
                                        </li>
                                    </ul>
                                    <div class="tab-content" id="emailContent">
                                        <div class="tab-pane fade active overflow-hidden show" id="email-1"
                                             role="tabpanel" aria-labelledby="email-home-tab">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="email-mes-list sVH" data-scrollbar="tab">
                                                        <!-- item -->
                                                        <div class="email-mes-item">
                                                            <form action="#" class="c-pointer">
                                                                <div class="d-flex align-items-center px-3 px-sm-4 py-4">
                                                                    <div class="icon-waste-can"></div>
                                                                    <div class="ml-2 ml-sm-3">
                                                                        <span class="icon-star-shape-favorite" onclick="toggleFavorite(this)"></span>
                                                                        <span class="icon-star-favorite"
                                                                              style="display:none;"
                                                                              onclick="toggleFavorite(this)"></span>
                                                                    </div>
                                                                    <div class="email-mes-ar email-text ml-4">
                                                                        <span class="fw-500">徐建国</span>
                                                                    </div>
                                                                    <div class="flex-1 mw-0 ml-2 ml-sm-4">
                                                                        <div class="email-text fw-500"><span
                                                                                class="fw-600">建德市防汛防台抗旱应急预案</span>
                                                                            - 为做好我市洪涝台旱灾害及相关防御工程设施险情的防范与处置工作，保障防汛、防台、抗旱、抢险救灾应急工作依法、科学、有序、高效进行，最大限度地减少人员伤亡和财产损失，
                                                                        </div>
                                                                    </div>
                                                                    <div class="ml-4">
                                                                        <span class="fw-500">2023.11.23</span>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <!-- /.item -->
                                                        <!-- item -->
                                                        <div class="email-mes-item">
                                                            <form action="#" class="c-pointer">
                                                                <div class="d-flex align-items-center px-3 px-sm-4 py-4">
                                                                    <div class="icon-waste-can"></div>
                                                                    <div class="ml-2 ml-sm-3">
                                                                        <span class="icon-star-shape-favorite" onclick="toggleFavorite(this)"></span>
                                                                        <span class="icon-star-favorite"
                                                                              style="display:none;"
                                                                              onclick="toggleFavorite(this)"></span>
                                                                    </div>
                                                                    <div class="email-mes-ar email-text ml-4">
                                                                        <span class="fw-500">周文华</span>
                                                                    </div>
                                                                    <div class="flex-1 mw-0 ml-2 ml-sm-4">
                                                                        <div class="email-text fw-500"><span
                                                                                class="fw-600">建德市气象灾害应急预案（2020年修订）</span>
                                                                            - 为有效提高我市应对气象灾害的综合应急能力，最大限度避免或减轻气象灾害造成的影响和损失，保障公共安全和人民群众生命财产安全，维护正常的生产和生活秩序，特制定本预案
                                                                        </div>
                                                                    </div>
                                                                    <div class="ml-4">
                                                                        <span class="fw-500">2023.11.21</span>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <!-- /.item -->
                                                        <!-- item -->
                                                        <div class="email-mes-item">
                                                            <form action="#" class="c-pointer">
                                                                <div class="d-flex align-items-center px-3 px-sm-4 py-4">
                                                                    <div class="icon-waste-can"></div>
                                                                    <div class="ml-2 ml-sm-3">
                                                                        <span class="icon-star-shape-favorite" onclick="toggleFavorite(this)"></span>
                                                                        <span class="icon-star-favorite"
                                                                              style="display:none;"
                                                                              onclick="toggleFavorite(this)"></span>
                                                                    </div>
                                                                    <div class="email-mes-ar email-text ml-4">
                                                                        <span class="fw-500">刘光明</span>
                                                                    </div>
                                                                    <div class="flex-1 mw-0 ml-2 ml-sm-4">
                                                                        <div class="email-text fw-500"><span
                                                                                class="fw-600">建德市自然灾害救助应急预案</span>
                                                                            - 建立健全应对重大自然灾害发生所造成群众基本生活困难的救助体系和应急运行机制，利用各类救助资源，规范应急救助行为，提高灾害救助能力，最大限度地减少人民群众生命财产损失，确保受灾人员基本生活，维护灾区社会稳定。
                                                                        </div>
                                                                    </div>
                                                                    <div class="ml-4">
                                                                        <span class="fw-500">2023.11.20</span>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <!-- /.item -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="email-2" role="tabpanel"
                                             aria-labelledby="email-profile-tab">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="email-mes-list sVH" data-scrollbar="tab">
                                                        <!-- item -->
                                                        <div class="email-mes-item">
                                                            <form action="#" class="c-pointer">
                                                                <div class="d-flex align-items-center px-3 px-sm-4 py-4">
                                                                    <div class="icon-waste-can"></div>
                                                                    <div class="ml-2 ml-sm-3">
                                                                        <span class="icon-star-shape-favorite" onclick="toggleFavorite(this)"></span>
                                                                        <span class="icon-star-favorite"
                                                                              style="display:none;"
                                                                              onclick="toggleFavorite(this)"></span>
                                                                    </div>
                                                                    <div class="email-mes-ar email-text ml-4">
                                                                        <span class="fw-500">张云飞</span>
                                                                    </div>
                                                                    <div class="flex-1 mw-0 ml-2 ml-sm-4">
                                                                        <div class="email-text fw-500"><span
                                                                                class="fw-600">建德市突发公共事件新闻发布应急预案</span>
                                                                            - 突发公共事件新闻发布是突发公共事件处置工作的重要组成部分。本预案的编制，旨在加强党委政府应对突发公共事件新闻发布工作的规范化、制度化建设，及时、准确发布有关信息，合力有效处置突发事件；
                                                                        </div>
                                                                    </div>
                                                                    <div class="ml-4">
                                                                        <span class="fw-500">2023.11.21</span>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <!-- /.item -->
                                                        <!-- item -->
                                                        <div class="email-mes-item">
                                                            <form action="#" class="c-pointer">
                                                                <div class="d-flex align-items-center px-3 px-sm-4 py-4">
                                                                    <div class="icon-waste-can"></div>
                                                                    <div class="ml-2 ml-sm-3">
                                                                        <span class="icon-star-shape-favorite" onclick="toggleFavorite(this)"></span>
                                                                        <span class="icon-star-favorite"
                                                                              style="display:none;"
                                                                              onclick="toggleFavorite(this)"></span>
                                                                    </div>
                                                                    <div class="email-mes-ar email-text ml-4">
                                                                        <span class="fw-500">周文峰</span>
                                                                    </div>
                                                                    <div class="flex-1 mw-0 ml-2 ml-sm-4">
                                                                        <div class="email-text fw-500"><span
                                                                                class="fw-600">建德市学校突发公共卫生事件应急预案</span>
                                                                            - 为提高全市各级各类学校预防、控制突发公共卫生事件的能力和水平，有效预防、正确应对、及时控制突发公共卫生事件，规范突发公共卫生事件的应急处置工作，最大限度地减少损失，保障广大师生的身体健康和生命安全，维护学校正常的教学秩序和校园稳定，制定本预案。
                                                                        </div>
                                                                    </div>
                                                                    <div class="ml-4">
                                                                        <span class="fw-500">2023.11.19</span>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <!-- /.item -->
                                                        <!-- item -->
                                                        <div class="email-mes-item">
                                                            <form action="#" class="c-pointer">
                                                                <div class="d-flex align-items-center px-3 px-sm-4 py-4">
                                                                    <div class="icon-waste-can"></div>
                                                                    <div class="ml-2 ml-sm-3">
                                                                        <span class="icon-star-shape-favorite" onclick="toggleFavorite(this)"></span>
                                                                        <span class="icon-star-favorite"
                                                                              style="display:none;"
                                                                              onclick="toggleFavorite(this)"></span>
                                                                    </div>
                                                                    <div class="email-mes-ar email-text ml-4">
                                                                        <span class="fw-500">陈桂芳</span>
                                                                    </div>
                                                                    <div class="flex-1 mw-0 ml-2 ml-sm-4">
                                                                        <div class="email-text fw-500"><span
                                                                                class="fw-600">建德市中小学幼儿园突发公共事件应急预案</span>
                                                                            - 为迅速、有序、高效地处置我市中小学幼儿园（以下简称学校）突发公共事件，保障学校师生员工健康和生命财产安全，维护社会稳定，根据《浙江省突发公共事件总体应急预案》《浙江省中小学校学生人身
                                                                        </div>
                                                                    </div>
                                                                    <div class="ml-4">
                                                                        <span class="fw-500">2023.11.18</span>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <!-- /.item -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="email-3" role="tabpanel"
                                             aria-labelledby="email-contact-tab">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="email-mes-list sVH" data-scrollbar="tab">
                                                        <!-- item -->
                                                        <div class="email-mes-item">
                                                            <form action="#" class="c-pointer">
                                                                <div class="d-flex align-items-center px-3 px-sm-4 py-4">
                                                                    <div class="icon-waste-can"></div>
                                                                    <div class="ml-2 ml-sm-3">
                                                                        <span class="icon-star-shape-favorite" onclick="toggleFavorite(this)"></span>
                                                                        <span class="icon-star-favorite"
                                                                              style="display:none;"
                                                                              onclick="toggleFavorite(this)"></span>
                                                                    </div>
                                                                    <div class="email-mes-ar email-text ml-4">
                                                                        <span class="fw-500">王振宇</span>
                                                                    </div>
                                                                    <div class="flex-1 mw-0 ml-2 ml-sm-4">
                                                                        <div class="email-text fw-500"><span
                                                                                class="fw-600">建德市森林火灾应急预案</span>
                                                                            - 为依法科学、有序有度、快速高效地做好建德市森林火灾防范和处置工作，提高森林防灭火工作的主动性和应变能力，最大程度地减少人员伤亡和经济损失，维护正常的社会秩序，保障建德市经济社会更快更好地发展，结合我市实际，特制定本预案。
                                                                        </div>
                                                                    </div>
                                                                    <div class="ml-4">
                                                                        <span class="fw-500">2023.11.23</span>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <!-- /.item -->
                                                        <!-- item -->
                                                        <div class="email-mes-item">
                                                            <form action="#" class="c-pointer">
                                                                <div class="d-flex align-items-center px-3 px-sm-4 py-4">
                                                                    <div class="icon-waste-can"></div>
                                                                    <div class="ml-2 ml-sm-3">
                                                                        <span class="icon-star-shape-favorite" onclick="toggleFavorite(this)"></span>
                                                                        <span class="icon-star-favorite"
                                                                              style="display:none;"
                                                                              onclick="toggleFavorite(this)"></span>
                                                                    </div>
                                                                    <div class="email-mes-ar email-text ml-4">
                                                                        <span class="fw-500">徐建国</span>
                                                                    </div>
                                                                    <div class="flex-1 mw-0 ml-2 ml-sm-4">
                                                                        <div class="email-text fw-500"><span
                                                                                class="fw-600">建德市重大火灾事故应急救援预案</span>
                                                                            - 为健全建德市重大火灾事故应急处置机制，科学有效地调度救援力量，正确采用各种战术、技术，快速实施灭火救援行动，最大限度地避免和减少人员伤亡和经济损失，保障公众生命健康和财产安全，维护社会稳定，依据《中华人民共和国消防法》、《建德市突发公共事件总体应急预案》等，结合本地实际，特制定此预案。
                                                                        </div>
                                                                    </div>
                                                                    <div class="ml-4">
                                                                        <span class="fw-500">2023.11.20</span>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <!-- /.item -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- footer -->
        <footer id="footer" class="footer">
            <div class="container-fluid">
                <div class="row gutters-y align-items-center">
                    <div class="col-md-6 col-lg-5">

                    </div>
                    <div class="col-md-6 col-lg-7 order-lg-last d-none d-md-block">
                        <div class="nav nav-bold-style justify-content-end text-uppercase px-2">
                            <a class="nav-link" href="#">用户须知</a>
                            <a class="nav-link" href="#">使用指南</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- /.footer -->
    </div>
</main>
<!-- /.main -->

<!-- offcanvas - search -->
<div id="offcanvas-search" class="offcanvas h-100 py-8" data-animation="fadeDown" data-scrollbar="offcanvas">
    <div class="row">
        <div class="col-sm-1 order-sm-last">
            <button type="button" data-toggle="offcanvas-close"
                    class="close float-right mr-lg-6 text-light o-1 lead-2 fw-100" data-dismiss="offcanvas"
                    aria-label="Close">
                <span aria-hidden="true" class="icon-close"></span>
            </button>
        </div>
        <form class="col-sm-11 col-lg-10 mx-auto input-rounded form-inline position-relative w-100 mt-0">
            <div class="input-group bg-none border-0 w-100">
                <input class="form-control form-control-lg rounded-0 bg-none pl-0 h-auto fs-6 display-md-4 display-xl-2 fw-600"
                       type="text" aria-label="Search" placeholder="Search for...">
            </div>
            <hr class="w-100 o-25 border-white mt-0">
            <div class="row gutters-y w-100">
                <div class="col-lg-3">
                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Categories
                    </h5>
                    <ul class="list-unstyled pl-4">
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Architecture</strong> (800)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Art & Illustration</strong> (317)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Business & Corporate</strong> (419)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Culture & Education</strong> (672)</a>
                        </li>
                        <li class="mb-0">
                            <a href="#" class="tag-item"><strong>E-Commerce</strong> (272)</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Tags</h5>
                    <ul class="list-unstyled pl-4">
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>360</strong> (128)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>3D</strong> (42)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Animation</strong> (4105)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Apps</strong> (319)</a>
                        </li>
                        <li class="mb-0">
                            <a href="#" class="tag-item"><strong>Apps</strong> (319)</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Technologies
                    </h5>
                    <ul class="list-unstyled pl-4">
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>AngularJS</strong> (629)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Apache</strong> (241)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Bootstrap</strong> (751)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>CloudFire</strong> (209)</a>
                        </li>
                        <li class="mb-0">
                            <a href="#" class="tag-item"><strong>CloudFire</strong> (107)</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Countries
                    </h5>
                    <ul class="list-unstyled pl-4">
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>United States</strong> (1605)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>France</strong> (569)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Business & Corporate</strong> (419)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>United Kingdom</strong> (672)</a>
                        </li>
                        <li class="mb-0">
                            <a href="#" class="tag-item"><strong>Italy</strong> (484)</a>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- /.offcanvas - search -->

<!-- preloader -->
<div class="preloaderWrapper"></div>

<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>

<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>

<!-- Chart.js -->
<script src="assets/plugins/chart/Chart.min.js" id="_chartJS_min"></script>
<script src="assets/plugins/chart/Chart.bundle.min.js"></script>
<script src="assets/plugins/chart/chartjs-plugin-annotation.js"></script>
<script src="assets/plugins/chart/chartjs-plugin-labels.js"></script>

<!-- apexcharts -->
<script src="assets/plugins/apexcharts/apexcharts.min.js"></script>

<!-- RangeSlider -->
<script src="assets/plugins/rangeslider/rangeslider.min.js" id="_rangeJS_min"></script>

<!-- Moment -->
<script src="assets/plugins/lib/moment/moment.min.js"></script>

<!-- JQVMAP -->
<script src="assets/plugins/jqvmap/jquery.vmap.min.js" id="_JQVMAP"></script>
<script src="assets/plugins/jqvmap/maps/jquery.vmap.world.js"></script>

<!-- dateRangePicker -->
<script src="assets/plugins/daterangepicker/daterangepicker.js" id="_DateRangeJS_min"></script>

<!-- User JS -->
<script src="assets/js/scripts.js"></script>

<!-- Main JS -->
<script src="assets/js/main.js" id="_mainJS" data-plugins="load"></script>

<!-- Modules -->
<script src="assets/js/modules.js"></script>

</body>
</html>

<script>


    $(document).ready(function () {
        // 加载界面时弹窗先不显示
        $("#panelBody").hide();

        $("#menu-edit").click(function () {
            $("#panelBody").fadeToggle();
        });

        $("#removeLink").click(function () {
            $("#panelBody").fadeOut();
        });
    });


    function toggleFavorite(element) {
        // 获取邮件项的父元素
        var emailItem = element.closest(".email-mes-item1");
        // 将父元素移到列表顶部
        emailItem.parentNode.prepend(emailItem);

        // 获取两个span元素
        var starShape = document.getElementById("starShape");
        var starFavorite = document.getElementById("starFavorite");

        // 切换显示和隐藏
        starShape.style.display = starShape.style.display === "none" ? "" : "none";
        starFavorite.style.display = starFavorite.style.display === "none" ? "" : "none";
    }

    // 获取所有包含 .email-mes-item 类的元素
    const emailMesItems = document.querySelectorAll('.email-mes-item');

    // 遍历每个 .email-mes-item 元素
    emailMesItems.forEach(function (item) {
        // 查找当前元素下的 .icon-waste-can 元素
        const wasteCanIcon = item.querySelector('.icon-waste-can');

        // 添加点击事件监听器
        wasteCanIcon.addEventListener('click', function () {
            // 删除父级元素
            item.remove();
        });
    });

    //星星
    function toggleFavorite(element) {
        var shapeIcon = element.parentElement.querySelector('.icon-star-shape-favorite');
        var favoriteIcon = element.parentElement.querySelector('.icon-star-favorite');

        if (shapeIcon.style.display === 'none') {
            shapeIcon.style.display = 'inline';
            favoriteIcon.style.display = 'none';
        } else {
            shapeIcon.style.display = 'none';
            favoriteIcon.style.display = 'inline';
        }
    }
</script>
<style>
    .Avatar-rounded-circle {
        border-radius: 50% !important;
        height: 40px;
        width: 40px;
        text-align: center;
        border-style: solid;
        line-height: 35px;
    }

    .parent {
        display: flex;
        justify-content: space-between;
        height: 3rem;
        align-items: center;
        padding: 0.5rem;
    }

    .menu1 {
        float: left;
        width: 19rem;
        margin-top: -11px;
        margin-left: -14px;
    }

    .panel-body, .panel-header {
        border-width: 1px !important;
        border-style: solid !important;
        border-color: rgba(42, 242, 112, 0.2) !important;
        border-top: none !important;
    }

    .row .panel-row {
        direction: rtl;
    }

    .main1 {
        width: 180%;
        height: 60vh;
        padding: 10px 30px 30px 30px;
    }

    .form11 {
        width: 76rem;
    }

    .nav-tabs-minimal {
        line-height: 3rem;
    }

    .icon{
        color: #2af270 !important;
    }

    .btn-theme{
        line-height: 2rem;
    }

    .menu2{
        margin-right: 1rem;
    }

</style>